<template>
	<view>
		<view class="search">
			<search @click.native="gotoSearch" ></search>
		</view>
		
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="(item,index) in swiperList" key="index">
				<navigator :url="'/pkgGoods/goods_detail/goods_detail?goods_id='+item.goods_id" class="swiper-item">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>
		
		<!-- 分类导航区域 -->
		<view class="nav-list">
		   <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
		     <image :src="item.image_src" class="nav-img"></image>
		   </view>
		</view>
		
		<!-- 楼梯列表 -->
		<view class="floor">
			<view class="floor_item" v-for="(item,index) in floorList" :key="index">
				<view class="floor_title">
					<image :src="item.floor_title.image_src" mode=""></image>
				</view>
				<view class="floor_body" >
					<navigator class="floor_img1" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width+'rpx'}" mode="widthFix"></image>
					</navigator>
					<view class="floor_img">
						<navigator :url="it.url" class="floor_img_item"  v-for="(it,i) in item.product_list" :key="i" v-if="i!==0">
							<image :src="it.image_src" :style="{width: it.image_width+'rpx'}" mode="widthFix" ></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				navList:[],
				floorList:[]
			};
		},
		onLoad() {
			this.getswiperList(),
			this.getNavList(),
			this.getFloorList()
		},
		methods:{
			// 获取轮播图
			async getswiperList(){
				const res= await uni.$http.get('/home/swiperdata')
				// console.log(res);
				if(res.data.meta.status !==200) return uni.$showMsg()
				this.swiperList=res.data.message
			},
			// 获取navlist
			async getNavList(){
				const res= await uni.$http.get('/home/catitems')
				// console.log(res);
				if(res.data.meta.status !==200) return uni.$showMsg()
				this.navList=res.data.message
			},
			// nav-item 项被点击时候的事件处理函数
			navClickHandler(item) {
			  // 判断点击的是哪个 nav
			  if (item.name === '分类') {
			    uni.switchTab({
			    	url:'/pages/cate/cate'
			    })
			  }
			},
			
			// 获取楼梯列表
			async getFloorList(){
				const {data:res} = await uni.$http.get('/home/floordata')
				// console.log(res);
				if(res.meta.status !==200) return uni.$showMsg()
				res.message.forEach((item)=>{
					item.product_list.forEach((it)=>{
						it.url='/pkgGoods/goods_list/goods_list?'+it.navigator_url.split('?')[1]
					})
				})
				this.floorList=res.message
			},
			// 
			gotoSearch(){
				uni.navigateTo({
					url:'pkgGoods/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.search{
		// 粘性定位--当距离顶部还剩下0的时候，固定住
		position: sticky;
		top: 0;
		z-index: 999;
	}
swiper{
	height: 330rpx;
	swiper-item{
		height: 100%;
		width: 100%;
		.swiper-item,image{
			width: 100%;
			height: 100%;
		}
	}
	
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor{
	.floor_item{
		// height: 460rpx;
		margin: 10rpx 0;
		.floor_title{
			height: 60rpx;
			width: 100%;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.floor_body{
			width: 100%;
			// height: 400rpx;
			display: flex;
			.floor_img1{
				width: 33.3%;
				// height: 100%;
				// background-color: aqua;
			}
			.floor_img{
				width: 66.6%;
				// height: 100%;
				// background-color: rebeccapurple;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				.floor_img_item{
					// width: 50%;
					// height: 50%;
					// margin: 5rpx;
					// box-sizing: border-box;
					// border: 1px solid black;
				}
			}
		}
	}
}

</style>
